<template>
 <div>
   <!-- 页头 -->
  <el-row :gutter="10">
    <el-col :span="2" style="position:absolute; padding-top:20px;padding-left:30px;"><el-button  type="primary"  plain icon="el-icon-arrow-left" >返回</el-button></el-col>
    <el-col :span="20" style="position:relative;left:150px;top:10px;">
      <div>
          <h3>我的考勤</h3>
          <p>工号：{{userInfo.userId}}</p>
      </div>
    </el-col>
  </el-row>
  <el-divider></el-divider>
  <el-row style="margin-top:50px;">
    <!-- 日历 -->
    <el-col :span="12" :offset="1">
       <v-date-picker
        :value="null"
        is-expanded
        :rows="2"
        :columns="$screens({ tablet:1})"
        :attributes="attributes" />
    </el-col>
    <!-- 饼状图 -->
    <el-col :span="10" :offset="1">
          <el-form :inline="true" :model="selectDate" >
             <el-form-item label="年份：">
            <el-input placeholder="2021" v-model="selectDate.year" ></el-input>
          </el-form-item>
           <el-form-item label="月份：">
             <el-select v-model="selectDate.month" placeholder="">
               <el-option v-for="index in 13" :key="index" :label="index" :value="index"></el-option>
          </el-select>
          </el-form-item>
          </el-form>
         <div ref="chart" style="width: 100%;height:400px;margin-top:20px;"></div>
    </el-col>
  </el-row>
 </div>
</template>

<script>
import {getCalendarData,getChartPercent} from '@/api/attendance'
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
     workdays : [],
     selectDate:{
       year:new Date().getFullYear(),
       month:new Date().getMonth()+1
     },
     option:[]
    }
  },
  computed:{
    ...mapGetters([
      'userInfo'
    ]),
    attributes(){
      return  [
        ...this.workdays.map(workday => ({
            dates: workday.dates,
            dot: {
              color: workday.color,
            },
            popover: {
              label: workday.description,
            },
        }))
      ]
    }
  },
  mounted(){
    this.getChartPercent()
    this.getCalendarData()
  },
  methods:{
    //饼状图数据
    async getChartPercent(){
      const res = await getChartPercent(this.userInfo.userId,this.selectDate.year,this.selectDate.month)
      if(res.code==200){
        const myChart = this.$echarts.init(this.$refs.chart)
        myChart.setOption(res.data.option)
      }
    },
    //考勤数据
    async getCalendarData(){
      const res = await getCalendarData(this.userInfo.userId)
      if(res.code==200){
        this.workdays=res.data.workdays
      }
    }
  }
}
</script>

<style lang="postcss" scoped>
::-webkit-scrollbar {
  width: 0px;
}
::-webkit-scrollbar-track {
  display: none;
}
/deep/ .custom-calendar.vc-container {
  --day-border: 1px solid #b8c2cc;
  --day-border-highlight: 1px solid #b8c2cc;
  --day-width: 90px;
  --day-height: 90px;
  --weekday-bg: #f8fafc;
  --weekday-border: 1px solid #eaeaea;
  border-radius: 0;
  width: 100%;
  & .vc-header {
    background-color: #f1f5f8;
    padding: 10px 0;
  }
  & .vc-weeks {
    padding: 0;
  }
  & .vc-weekday {
    background-color: var(--weekday-bg);
    border-bottom: var(--weekday-border);
    border-top: var(--weekday-border);
    padding: 5px 0;
  }
  & .vc-day {
    padding: 0 5px 3px 5px;
    text-align: left;
    height: var(--day-height);
    min-width: var(--day-width);
    background-color: white;
    &.weekday-1,
    &.weekday-7 {
      background-color: #eff8ff;
    }
    &:not(.on-bottom) {
      border-bottom: var(--day-border);
      &.weekday-1 {
        border-bottom: var(--day-border-highlight);
      }
    }
    &:not(.on-right) {
      border-right: var(--day-border);
    }
  }
  & .vc-day-dots {
    margin-bottom: 5px;
  }
}
</style>